<template>
  <div>
     <!-- 模态框 -->
     <el-dialog
        title="新增评论"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="content">
         <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
  
          <el-form-item label="性别" prop="sex">
           <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
           </el-select>
          </el-form-item>
  
          <el-form-item label="出生日期" prop="date">
           <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
           </el-col>
          </el-form-item>
  
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-form>
  
        <el-button type="primary" @click="AddOrEdit">确认</el-button>
        <el-button type="info" @click="form={}">重置</el-button>
        </div>
       
      </el-dialog>
  
  
  
     <!-- 新增按钮 -->
     <div class="header">
        <!-- <el-button type="primary" @click="addUser" >
         + 新增
        </el-button> -->
  
         <el-button type="danger" icon="el-icon-delete" @click="buchDelete">
           批量删除
         </el-button>
  
        <div class="search"> 
          <el-button @click="search" icon="el-icon-search" type="primary"
          >查询</el-button>
         <!-- 搜索框 -->
        <el-input placeholder="请根据右侧条件查询" 
         prefix-icon="el-icon-search" 
         v-model="searchname" clearable>
        </el-input>
        </div>
        <el-select v-model="value" placeholder="条件查询" @change="getByStatus">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value" >
        </el-option>
      </el-select>
        
     </div>
  
  
   <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      max-height="490"
      @select="getSelect"
      @select-all="SelectAll">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
  
      <el-table-column
        prop="username"
        label="用户"
        width="120">
      </el-table-column>
  
      <el-table-column
        prop="title"
        label="文章标题"
        width="120">
      </el-table-column>
  
      <el-table-column
        prop="comment.comment"
        label="评论"
        empty-text="暂无数据"
        width="300"
        >
      </el-table-column>
  
      <el-table-column
        prop="nickname"
        label="用户昵称"
        width="100">
      </el-table-column>
  
  
      <el-table-column
        prop="comment.createtime"
        label="发布时间"
        width="180">
      </el-table-column>
  
      <el-table-column
        prop="comment.updatetime"
        label="修改时间"
        width="180">
      </el-table-column>
  
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
  
    </el-table>
  
    <!-- 分页插件 -->
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 25]"
        :page-size="pageSize"
        :page-count="paegcount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalinfo">
      </el-pagination>
   
  </div>
  </template>
  
  <script>
  import reqComment from "@/api/articleinfo"
    export default {
       mounted(){
        var reqBody={"page":1,"size":10}
        //查询评论
        this.pageSelect(reqBody)
      },
      data() {
        return {
          tableData: [],
           //当前页面
            currentPage:'',
            //总记录数
            totalinfo:'',
           //每条页数
           pageSize:10,
           //总页数
           pageCount:'',
           //查询选项
           options:[{
            value:1,
            label:'用户名'
            },{
                value:2,
                label:'昵称'
            },
              {
                value:3,
                label:'文章标题'
            },{
                value:4,
                label:'评论内容'
            }],
            value:'',           
             //查询输入值
             searchname:'',
             //批量删除
             ids:[],
            //校验数据
          // rules:{
          //   name:[{required:true ,message:'请输入名字',trigger:'blur'}],
          //   sex:[{required:true ,message:'请输入性别',trigger:'blur'}],
          //   address:[{required:true ,message:'请输入地址',trigger:'blur'}],
          //   date:[{required:false ,message:'请输入出生日期',trigger:'blur'}]
          // },
           //模态框是否可见
            dialogVisible:false,
            //控制是否是新增或者是修改,默认是新增
            isAddorEdit:true,
             //模态框数据
             form:{
              date:'',
              name: '',
              sex:'',
              address:''
            },
        }
      },
      methods: {
        //分页查询
      async pageSelect(reqBody){   
         const res = await reqComment.getComments(reqBody);
         if(res.code==200){
        this.tableData = res.data.records;
        this.totalinfo = res.data.total
        this.currentPage = res.data.current;
        this.pageCount = res.data.pages
         }   
       },
         //编辑数据
         handleEdit(index,row){
            //模态框可见
            this.dialogVisible = true
            //确认按钮为修改
            this.isAddorEdit = false 
            this.form = row
  
          },
        //删除
        handleDelete(index, row) {
          this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await reqComment.deleteOne(row.comment.id);
          this.tableData.splice(index,1)
          if(res.code == 200){
               this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }else this.$message({
            type: 'info',
            message: '删除失败!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


        },
        //当页面尺寸变换时
        handleSizeChange(val){
          this.pageSelect(this.currentPage,val)
        },
        //当当前页面变换时
        handleCurrentChange(val){
          this.pageSelect(val,this.pageSize)
        },
        addUser(){
            //模态框是否可见
            this.dialogVisible =true 
            //是新增
            this.isAddorEdit = true 
            
          },
        AddOrEdit(){           
            this.$refs.form.validate((res)=>{
  
              //表示校验通过
                if(res){
                  //在判断是新增还是修改
                  if(this.isAddorEdit){
                    //表示新增
                    //发送post请求，添加用户
                   this.tableData.push(this.form)
                  
                   this.dialogVisible=false
                  
                   this.$message("新增成功！")
                   //把表单数据清除
                  // this.handleClose()
                  }
                else{
                    //是修改
                    //发送put请求，修改数据
                    //刷新
                    }
                }else{
                  //表示校验未通过，不能关闭
                }
              })
          },
          //条件查询
          search(){
            if(this.value==1){
              //根据用户名查询
             var reqBody ={"page":1,"size":10,"username":this.searchname}
             this.pageSelect(reqBody)
            }else if(this.value==2){
              //根据昵称查询
              var reqBody ={"page":1,"size":10,"nickname":this.searchname}
             this.pageSelect(reqBody)
            }else if(this.value==3){
              //根据文章标题查询
              var reqBody ={"page":1,"size":10,"title":this.searchname}
             this.pageSelect(reqBody)
            }else {
              //根据评论内容查询
              var reqBody ={"page":1,"size":10,"content":this.searchname}
             this.pageSelect(reqBody)
            }
          },
          //选择一个
        getSelect(selection){
         const idss =[]
         selection.forEach(item=>{
           idss.push(item.comment.id)
         })
         this.ids = idss
         console.log(this.ids);
        },
        //全选
        SelectAll(selection){
         const idss =[]
         selection.forEach(item=>{
           idss.push(item.comment.id)
         })
         this.ids = idss
         console.log(this.ids);
        },
        //批量删除
      buchDelete(){
        this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await reqComment.deleteBuch(this.ids);
          if(res.code == 200){
               this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //在查询一次就可以了
          this.pageSelect({"page":this.currentPage,"size":this.pageSize})
          }else this.$message({
            type: 'info',
            message: '删除失败!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      

      }
    }
  </script>
  <style lang="less" scoped>
   .header{
        display: flex;
        .el-input{
         
           width:200px
        }
        .search{
          margin-left: 350px;
         
        }
     }
  </style>